import { IvButton } from '@/components';
import { useEffect, useState, useRef, forwardRef } from 'react'
// 父组件
function ReactHooks(props) {
  // 3、useRef需要配合forwardRef一起使用 也可以直接定义 因为使用useState可能不会实时  可以获取htmldom和子组件的参数 
  const [a, setA] = useState(1)
  const inputRef = useRef(null)
  const valRef = useRef(1)
  const [valRef2,setValRef2] = useState(1)
  const ReactHooks3Ref = useRef(null)
  useEffect(() => {
    console.log(inputRef.current);
    console.log(ReactHooks3Ref.current);
  })


  return (
    <div>
      <IvButton onClick={(e) => { e(); setA(a + 1) }}>a++</IvButton>
      <IvButton onClick={(e) => { e(); setTimeout(() => { alert('a：' + a + '这个时候a的值为3秒前的') }, 3000) }}>弹出</IvButton>
      <div>
        <IvButton onClick={(e) => { e(); valRef.current = valRef.current + 1; setValRef2(valRef2+1)}}>valRef++</IvButton>
        <IvButton onClick={(e) => { e(); setTimeout(() => { alert('valRef：' + valRef.current + '这个时候valRef的值为实时的') }, 3000) }}>弹出</IvButton>
        <div>
        valRef:  {valRef2}
        </div>
      </div>
      <div>
        a:{a}
      </div>
      <input ref={inputRef}></input>
      <ReactHooks3 ref={ReactHooks3Ref} a={a} ></ReactHooks3>
    </div>
  )
}

const ReactHooks3 = forwardRef((props: any, onref) => {
  function asa() {
  }
  const [val] = useState(25)
  const obj = {
    asa,
    val
  }
  // @ts-ignore
  onref.current = obj
  return <div>
    ReactHooks3
  </div>
})
export default ReactHooks